<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;margin: 0;
        }
        .emoji-wrapper{
            margin: 50px auto;
            display: inline-block;
        }


        .emoji-wrapper table img{
            width: 22px;
            vertical-align: middle;
        }
        .emoji-wrapper table{
            border: 1px solid #ddd;
            border-collapse: collapse;
        }
        .emoji-wrapper td{
            padding: 3px 4px;
            border: 1px solid #ddd;
            text-align: center;
        }
        .emoji-wrapper td:hover{
            background: #b6e2fa;
            cursor: pointer;
        }
        .emoji-wrapper{
            min-height: 60px;
            overflow-y: auto;
            position: relative;
        }
        .emoji-wrapper .show-image-detail.pos-left{
            top: 0;
            left: 0;
        }
        .emoji-wrapper .show-image-detail{
            position: absolute;
            right: 0;
            top: 0;
            width: 70px;
            height: 70px;
            border: 2px solid #09a0f1;
            background: #ffffff;
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 2px;
            display: none;
        }
        .emoji-wrapper .show-image-detail img{
            max-width: 60px;
            max-height: 60px;
        }
    </style>
</head>
<body>
    <div style="text-align: center;">
        <div class="emoji-wrapper" >
            <table>
            </table>   
            <div class="show-image-detail"></div>
        </div>
    </div>
    <script src="./emoji.js"></script>
    <script>
        const parent = document.querySelector('.emoji-wrapper')
        const imgDetail = parent.querySelector('.show-image-detail')
        const getElIndex = (el) => {
            const elParent = el.parentElement;
            return [...elParent.querySelectorAll('td')].findIndex(child => child === el)
        }


        function bindEvent() {
            parent.querySelectorAll('td').forEach(element => {
                element.addEventListener('mouseenter', (e) => {
                    const el = e.target
                    const index = getElIndex(el)
                    const img = el.querySelector('img')
                    imgDetail.style.display = 'flex'
                    if(img) {
                        const src = img.getAttribute('src')
                        imgDetail.innerHTML = `<img src="${src}"/>`
                        index < 5 ? imgDetail.classList.remove('pos-left') : imgDetail.classList.add('pos-left')
                    }
                })
            }); 
            parent.querySelector('table').addEventListener('mouseleave', function() {
                imgDetail.style.display = 'none'
            })

            parent.querySelectorAll('table td').forEach(el => {
                el.addEventListener('click', function() {
                    const imgEl = el.querySelector('img')
                    if(imgEl) {
                        const src = imgEl.getAttribute('src')
                        console.log(src, src);
                    }
                })
            })

        }


        function initRender() {
            if(emojiList) {
                const htmls = []
                emojiList.forEach((src, index) => {
                    if(index % 10 === 0) {
                        htmls.push('<tr>')
                    }
                    htmls.push(`<td><img src="${src}" alt=""></td>`)
                    if((index + 1) % 10 === 0) {
                        htmls.push('</tr>')
                    }
                })
                parent.querySelector('table').innerHTML = htmls.join('')
                this.bindEvent()
            }
        }

        initRender()
    </script>
</body>
</html>